<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端路由demo</title>
</head>

<body>
  <ul>
    <li><a href="/">turn one</a></li>
    <li><a href="/two">turn two</a></li>
    <li><a href="/three">turn three</a></li>
  </ul>
  <div id="app">one</div>
  <script>
    // js部分
    // 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
    window.addEventListener('load', onPopState)
    // 监听路由变化
    window.addEventListener('popstate', onPopState)

    // 路由视图
    var routerView = document.querySelector('#app')

    // 拦截 <a> 标签点击事件默认行为， 点击时使用 pushState 修改 URL并更新手动 UI，从而实现点击链接更新 URL 和 UI 的效果。
    var linkList = document.querySelectorAll('a')
    linkList.forEach(el => {
      el.addEventListener('click', function (e) {
        e.preventDefault()
        // pushState(state, title, url)
        history.pushState(null, '', el.getAttribute('href'))
        onPopState()
      })
    })

    // 路由变化时，根据路由渲染对应 UI
    function onPopState() {
      switch (location.pathname) {
        case '/':
          routerView.innerHTML = 'one'
          return
        case '/two':
          routerView.innerHTML = 'two'
          return
        case '/three':
          routerView.innerHTML = 'three'
          return
        default:
          return
      }
    }

    // class Router{
    //   constructor() {
    //     this.routes = {}
    //     this.currentUrl = ''
    //     this.refresh = this.refresh.bind(this)
    //     // window.addEventListener('load', this.refresh, false)
    //     window.addEventListener('hashchange', function(e) {
    //       console.log(e)
    //       this.refresh(e.state.path)
    //     }, false)
    //   }
    //   route(path, callback) {
    //     history.pushState({path: path}, null, path)
    //     this.routes[path] = callback || function () {}
    //   }

    //   refresh(path) {
    //     this.routes[path]();
    //   }
    // }

    // var router = new Router()
    // let app = document.getElementById('app')
    // let ul = document.querySelector('ul')

    // function changeContent(text) {
    //   app.innerHTML = text
    // }

    // router.route('/', function () {
    //   changeContent('one')
    // })
    // router.route('/two', function () {
    //   changeContent('two')
    // })
    // router.route('/three', function () {
    //   changeContent('three')
    // })

    // ul.addEventListener('click', function (e) {
    //   e.preventDefault()
    //   Router.go(e.target.getAttribute('href'));
    // })
  </script>
</body>

</html>